<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css?v=102">
    <style>
        .layui-table td, .layui-table th {
            min-width: 40px;
        }
        input.attendance{
            height:26px !important;
            padding-left: 5px;
        }
        .layui-table-cell {
            padding: 0px 5px;
            text-align: center;
        }
    </style>
</head>
<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">人力资源管理</a>
            <a>
                <cite>考勤列表</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid attendance">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">月历</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type='text/html' id='toolbar'>
    <button type="button" class='addAttendants layui-btn' auth='addAttendance'>添加出勤人员</button>
    <!--    <button type="button" class='batchSet  layui-btn'>批量设置</button>-->
    <button type="button" class='save  layui-btn' auth='saveAttendance'>保存</button>
</script>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var curYear = date.getFullYear();
        var curMonth = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        var curDay = date.getDate();
        var projectId = getParam('projectId');
        laydate.render({
            elem: '#month'
            , type: 'month'
            , value: year + '-' + month
            , max: 0
        });

        var days = (new Date(year, month, 0)).getDate();
        var column = [ //表头
            {field: '', title: '编号', type: 'numbers', width: 40, fixed: 'left'},
            {field: 'name', title: '姓名', width: 70, fixed: 'left'},
            {field: 'jobNumber', title: '工号', width: 50, fixed: 'left'},
            {field: 'professionName', title: '工种', width: 90, fixed: 'left'},
            {
                field: 'rosterStatus', title: '状态', width: 70, fixed: 'left', templet(d) {
                    return d.rosterStatus == 0 ? "其他项目" : d.rosterStatus == 1 ? "当前项目" : '';
                }
            },
            {field: 1, title: 1, width: 60, templet: function (d) {return columnCallBack(d,1);}},
            {field: 2, title: 2, width: 60, templet: function (d) {return columnCallBack(d,2);}},
            {field: 3, title: 3, width: 60, templet: function (d) {return columnCallBack(d,3);}},
            {field: 4, title: 4, width: 60, templet: function (d) {return columnCallBack(d,4);}},
            {field: 5, title: 5, width: 60, templet: function (d) {return columnCallBack(d,5);}},
            {field: 6, title: 6, width: 60, templet: function (d) {return columnCallBack(d,6);}},
            {field: 7, title: 7, width: 60, templet: function (d) {return columnCallBack(d,7);}},
            {field: 8, title: 8, width: 60, templet: function (d) {return columnCallBack(d,8);}},
            {field: 9, title: 9, width: 60, templet: function (d) {return columnCallBack(d,9);}},
            {field: 10, title: 10, width: 60, templet: function (d) {return columnCallBack(d,10);}},
            {field: 11, title: 11, width: 60, templet: function (d) {return columnCallBack(d,11);}},
            {field: 12, title: 12, width: 60, templet: function (d) {return columnCallBack(d,12);}},
            {field: 13, title: 13, width: 60, templet: function (d) {return columnCallBack(d,13);}},
            {field: 14, title: 14, width: 60, templet: function (d) {return columnCallBack(d,14);}},
            {field: 15, title: 15, width: 60, templet: function (d) {return columnCallBack(d,15);}},
            {field: 16, title: 16, width: 60, templet: function (d) {return columnCallBack(d,16);}},
            {field: 17, title: 17, width: 60, templet: function (d) {return columnCallBack(d,17);}},
            {field: 18, title: 18, width: 60, templet: function (d) {return columnCallBack(d,18);}},
            {field: 19, title: 19, width: 60, templet: function (d) {return columnCallBack(d,19);}},
            {field: 20, title: 20, width: 60, templet: function (d) {return columnCallBack(d,20);}},
            {field: 21, title: 21, width: 60, templet: function (d) {return columnCallBack(d,21);}},
            {field: 22, title: 22, width: 60, templet: function (d) {return columnCallBack(d,22);}},
            {field: 23, title: 23, width: 60, templet: function (d) {return columnCallBack(d,23);}},
            {field: 24, title: 24, width: 60, templet: function (d) {return columnCallBack(d,24);}},
            {field: 25, title: 25, width: 60, templet: function (d) {return columnCallBack(d,25);}},
            {field: 26, title: 26, width: 60, templet: function (d) {return columnCallBack(d,26);}},
            {field: 27, title: 27, width: 60, templet: function (d) {return columnCallBack(d,27);}},
            {field: 28, title: 28, width: 60, templet: function (d) {return columnCallBack(d,28);}},
            {field: 29, title: 29, width: 60, templet: function (d) {return columnCallBack(d,29);}},
            {field: 30, title: 30, width: 60, templet: function (d) {return columnCallBack(d,30);}},
            {field: 31, title: 31, width: 60, templet: function (d) {return columnCallBack(d,31);}},
            {
                field: 'sum', title: '汇总', width: 70, templet: function (d) {
                    var sum = 0;
                    for (var i in d.attendance) {
                        if (d.attendance[i].projectId == projectId){
                            sum += Number(d.attendance[i].long);
                        }
                    }
                    return `<span title="" class='currProject'>${sum}</span>`;
                }
            },
        ];

        var minus = 31 - days;
        var tmpColumn = column.slice(0);
        for (var m = 0; m < minus; m++) {
            // tmpColumn.pop();
            tmpColumn.splice(-2,1);
        }
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/hrm/employee/attendance', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data,
                    "msg": res.msg,
                };
            },
            where: {
                projectId: projectId,
                month: year + '-' + month,
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: [{title: '提示说明', layEvent: 'tips', icon: 'layui-icon-tips'}, 'filter', {
                title: '导出',
                layEvent: 'export',
                icon: 'layui-icon-export'
            }],
            page: false, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                tmpColumn
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function (res, curr, count) {
                this.cols = []; //（关键代码）将cols初始化，否则表格重载时无法正确重新渲染表头
                permission();
            }
        });

        $('body').on('dblclick', 'td', function () {
            var td = $(this);
            var date = td.data('field');
            if (td.prevAll('td[data-field=rosterStatus]').data('content') !== 1){
                layer.open({
                    type: 0,
                    title: "修改考勤",
                    area: ["40%", '30%'],
                    content: `工人不在当前项目，不能补录考勤`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                });
                return false;
            }
            if(curMonth != ($('input#month').val()).substr(5, 2) || curYear !=($('input#month').val()).substr(0, 4)){
                layer.open({
                    type: 0,
                    title: "修改考勤",
                    area: ["40%", '30%'],
                    content: `非当前月份考勤，不能进行补录。`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                });
                return false;
            }
            if (Number(td.data('field')) < curDay) {
                layer.open({
                    type: 1,
                    title: "修改考勤",
                    area: ['40%', '25%'],
                    content: `
                    <form class="layui-form layerOpen" action="">
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">出勤时长</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="length" value="${td.find('div span').html()}">
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {

                    },
                    yes: function (index, layero) {
                        var length = $('#length').val();
                        var employeeId = td.parent().find('input').data('id');
                        var day = td.parent().find('input').data('date');
                        var newDay = day.substr(0, 8) + (date < 10 ? '0' + date : date);
                        var data = [];
                        data.push({length: length, day: newDay, employeeId: employeeId, projectId: projectId});
                        $.ajax({
                            type: "post",
                            url: url + '/hrm/employee/addAttendance',
                            data: {
                                data: data,
                                token: getParam('token')
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('考勤保存', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        reloadAttendance();
                                    }, 2000)
                                } else {
                                    tips('考勤保存', r);
                                }
                            }
                        })
                    }
                })
            }
        });

        table.on('toolbar(test)', function (data) {
            if (data.event == 'export') {
                layer.open({
                    type: 0,
                    title: "考勤列表",
                    area: ["40%", '30%'],
                    content: `当前考勤列表正在生成中,请稍等!`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                })
                $.ajax({
                    url: url + '/excel/export/attendance',
                    type: 'post',
                    data: {
                        projectId: projectId,
                        month: $('input#month').val(),
                        token: getParam('token')
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            layer.closeAll();
                            layer.open({
                                type: 0,
                                title: "导出",
                                area: ["40%", '30%'],
                                content: `<p class='one_p'>${r.msg}</p>`,
                                btn: ['关闭'],
                                skin: 'my-skin'
                            })
                        } else {
                            layer.closeAll();
                            layer.open({
                                type: 0,
                                title: "导出",
                                area: ["40%", '30%'],
                                content: `<p class='one_p'>${r.msg}</p>`,
                                btn: ['关闭'],
                                skin: 'my-skin'
                            })
                        }
                    }
                })
            } else if (data.event == 'tips') {
                layer.open({
                    type: 0,
                    title: "提示",
                    area: ["40%", '40%'],
                    content: `<ul>
                                <li>1.只有当前月份可以修改考勤</li>
                                <li>2.双击考勤区域的单元格可以修改当天考勤</li>
                                <li>3.鼠标指针移到数字上会显示考勤来自哪个项目</li>
                                <li>4.绿色数字表示考勤记录来自当前项目并且为当天录入的考勤</li>
                                <li>5.黄色数字表示考勤记录来自当前项目，但是为补录考勤</li>
                                <li>6.红色数字表示考勤记录来自于其他项目</li>
                              </ul>`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                })
            }
        });

        //搜索
        $('body').on('click', '#search', function () {
            reloadAttendance();
        });

        $('body').on('click', '.addAttendants', function () {
            layer.open({
                type: 1,
                title: "添加考勤人员",
                area: ['40%', '40%'],
                content: `
                    <form class='layui-form layerOpen'>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>查询姓名</label>
                                <div class='layui-input-block'>
                                    <input type='text' placeholder='请输入姓名或工号' name='search' autocomplete="off" class='layui-input'>
                                    <ul class='layerOpen_ul_list'></ul>
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                success: function () {
                    form.render();
                },
                yes: function (index, layero) {
                    var employeeId = $('input[name=search]').data('id');
                    $.ajax({
                        url: url + "/hrm/employee/supplement",
                        type: "POST",
                        data: {
                            employeeId: employeeId,
                            token: getToken()
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('添加考勤人员', r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    reloadAttendance();
                                }, 2000)
                            } else {
                                tips('添加考勤人员', r);
                            }
                        }
                    })
                }
            })
        });

        $('body').on('input propertychange', 'input[name=search]', function () {
            var val = $(this).val();
            var this_ind = $(this);
            var this_next = $(this).next();
            $.ajax({
                type: "post",
                url: url + '/hrm/employee/search',
                beforeSend: function () {
                    $('input[name=search]').attr('data-id', '');
                },
                data: {
                    projectId: projectId,
                    search: val,
                    token: getParam('token')
                },
                success: function (r) {
                    this_next.show();
                    if (r.data == "" || r.data == null) {
                        this_next.html('未查找到此人');
                    } else {
                        var li = '';
                        for (var i = 0; i < r.data.length; i++) {
                            li += `<li data-id=${r.data[i].id}>${r.data[i].name}</li>`
                        }
                        this_next.html(li);
                        $('ul li').click(function () {
                            this_ind.val($(this).html());
                            this_ind.attr('data-id', $(this).data('id'));
                            $('ul').hide();
                        })
                    }
                }
            })
        })

        $('body').on('click', '.save', function () {
            var attendance = $('input.attendance');
            var data = [];
            for (var i = 0; i < attendance.length; i++) {
                var length = $(attendance[i]).val();
                var day = $(attendance[i]).data('date');
                var employeeId = $(attendance[i]).data('id');

                if (length != '') {
                    data.push({length: length, day: day, employeeId: employeeId, projectId: projectId})
                }
            }
            $.ajax({
                type: "post",
                url: url + '/hrm/employee/addAttendance',
                data: {
                    data: data,
                    token: getParam('token')
                },
                beforeSend:function(){
                    $('button.save').addClass('layui-btn-disabled');
                },
                success: function (r) {
                    if (r.code == 100000) {
                        tips('考勤保存', r);
                        setTimeout(function () {
                            layer.closeAll();
                            reloadAttendance();
                        }, 2000)
                    } else {
                        tips('考勤保存', r);
                    }
                },
                complete:function(){
                    $('button.save').removeClass('layui-btn-disabled');
                }
            })
        });

        function reloadAttendance(){
            var month_search = $('input#month').val();
            year = month_search.substr(0, 4);
            month = month_search.substr(5, 2);
            days = (new Date(year, month, 0)).getDate();
            minus = 31 - days;
            tmpColumn = column.slice(0);
            for (var m = 0; m < minus; m++) {
                // tmpColumn.pop();
                tmpColumn.splice(-2,1);
            }
            table.reload('lists', {
                cols: [
                    tmpColumn
                ],
                where: {
                    token: getToken(),
                    projectId: projectId,
                    month: month_search
                }
            })
        }

        function columnCallBack(d,i){
            if (year == curYear && month == curMonth && curDay === i && projectId == d.projectId) {
                return `<input type="number" class="layui-input attendance" data-date="${year + '-' + month + '-'+(i<10?'0'+i:i)}" data-id="${d.id}" min=0 step="0.1" value="${d.attendance[i].long}"/>`
            } else {
                var className = ''
                if (projectId == d.attendance[i].projectId){
                    if (d.attendance[i].isCurrent === 1){
                        className = 'currProjectCurrDay';
                    }else{
                        className = 'currProjectOtherDay';
                    }
                }else{
                    className = 'otherProject';
                }
                return `<span title="${d.attendance[i].projectName}" class=${className}>${d.attendance[i].long}</span>`
            }
        }
    });
</script>

</html>